<template>
	<div class="contains" style="background: #f2f2f2;">
		<view class="carousel">
			<swiper indicator-dots circular=true duration="400">
				<swiper-item class="swiper-item" v-for="(item,index) in swiper" :key="index">
					<view class="image-wrapper">
						<image
							:src="host+item['image']" 
							class="loaded" 
							mode="aspectFill"
						></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		 <!-- <div class="swiper-content">
			  <swiper :autoplay="true" :interval="3000" :duration="1000">
			  	<swiper-item v-for="(item) in swiper">
			  		<view class="swiper-item">
						  <image :src="host+item['image']" class="loaded"  mode="aspectFill"></image>
					</view>
			  	</swiper-item>
			  </swiper>
			  <div class="swiper-op">
				   <div class="swiper-i-btn" @click="cart"></div>
				   <div class="swiper-i-btn"></div>
			  </div>
			  <div class="swiper-span">
				   1/{{swiper.length}}
			  </div>
		 </div> -->
		 <div class="detail-content">
			  <div class="detail-price-title">
				   <span class="price"><i>￥</i>{{detail['realPrice']}}</span>
				   <span class="old-price">￥{{detail['price']}}</span>
			  </div>
			  <div class="detail-info">
				   <span>快递：免运费</span>
				   <span>月销{{detail['saleNum']}}笔</span>
				   <span>{{detail['address']}}</span>
			  </div>
			  <div class="service">
				   <span>服务</span> 7天无理由·新品·72小时内发货
			  </div>
		 </div>
		 <div class="detail-body">
			  <div class="detail-body-title">商品详情</div>
			  <div class="detail-body-content">
				   <image :src="host+item['image']" v-for="item in detail['detail']" mode="widthFix"></image>
			  </div>
		 </div>
		 <div class="footer-op">
			 
		<!-- 	  <div class="footer-op-left"> -->
				  <!-- <div class="footer-op-item">
					   <div class="footer-op-i-icon">
						   <image src="../../assets/images/store.png" mode=""></image>
					   </div>
					   <div class="footer-op-i-text">店铺</div>
				   </div>
				   <div class="footer-op-item">
					   <div class="footer-op-i-icon">
						   <image src="../../assets/images/phone.png" mode=""></image>
					   </div>
					   <div class="footer-op-i-text">客服</div>
				   </div>
				   <div class="footer-op-item">
					   <div class="footer-op-i-icon">
						   <image src="../../assets/images/collect.png" mode=""></image>
					   </div>
					   <div class="footer-op-i-text">收藏</div>
				   </div> -->
			  <!-- </div> -->
			  <div class="footer-op-right">
				   <div class="footer-btn-to-cart" @click="addCart">加入购物车</div><div class="footer-btn-to-buy" @click="toCart">立即购买</div>
			  </div>
		 </div>
	</div>
</template>

<script>
	import { productDetail , addCart } from '../../../api/index.js';
	export default {
	  components:{
	  },
	  data(){
		 return {
			 swiper:[],
			 detail:[],
			 host:this.$domain
		 }
	  },
	  onShow() {
		
	  },
	  onLoad(options) {
		  this.id = options.id;
		  this.getDetail();
	  },
	  created(){
	  },
	  mounted(){
	  },
	  methods:{
		  getDetail(){
			  productDetail({id:this.id}).then(res=>{
				  this.swiper = res.swiper;
				  this.detail = {
					  'id':res.id,
					  'name':res.name,
					  'price':res.price,
					  'realPrice':res.realPrice,
					  'detail':res.detail,
					  'address':res.address,
					  'saleNum':res.saleNum,
				  }
			  })
		  },
		  addCart(){
			  addCart({id:this.detail['id']}).then(res=>{
				  if (res.code==200){
				  	uni.showToast({
				  		title:res.msg
				  	})
				  }
			  })
		  },
		  cart(){
			 uni.navigateTo({
			 	 'url':'/pages/views/pay/index',
			 }) 
		  },
		  toCart(){
			  uni.navigateTo({
			  	 'url':'/pages/views/pay/index?id='+this.detail['id'],
			  })
		  }
	  },
	};
</script>

<style lang="scss">
	.carousel {
		height: 722upx;
		position:relative;
		swiper{
			height: 100%;
		}
		.image-wrapper{
			width: 100%;
			height: 100%;
		}
		.swiper-item {
			display: flex;
			justify-content: center;
			align-content: center;
			height: 750upx;
			overflow: hidden;
			image {
				width: 100%;
				height: 100%;
			}
		}
		
	}
	.detail-body-content image { width: 100%;}
	.swiper-span { position: absolute; bottom: 10px; right: 10px; width:60px; height: 30px; color: aliceblue; text-align: center; line-height: 30px; border-radius: 15px; background: rgba(0, 0, 0, 0.5);}
	.swiper-op { position: absolute; width: 100%; height: 40px; top: 10px; text-align: right;}
	.swiper-i-btn { display: inline-block; width: 40px; height: 40px; margin-right: 10px; border-radius: 20px; background: rgba(0, 0, 0, .5);}
	.detail-content { width: 100%; height: auto; padding-top: 10px; background: #fff;}
	.detail-price-title { height: 40px; padding-left: 10px;}
	.price { display: inline-block; width: auto; height: 30px; font-size: 20px; color: red;}
	.price i { display: inline-block;}
	.old-price { color: #666; margin-left: 10px; font-size: 13px; text-decoration: line-through;}
	.detail-info { margin-top: 20px; height: 40px; text-align: center; border-bottom: 1px solid #eee;}
	.detail-info span { width: 33%; display: inline-block; color: #666;}
	.service { padding-left: 10px; height: 40px; color: #666; line-height: 40px;}
	.service span { color: #000; margin-right: 15px;}
	.detail-body { background: #fff; margin-top: 10px;}
	.detail-body-title { width: 90%; margin: 0 auto; height: 40px; line-height: 40px; color: #666;}
	.footer-op { width: 100%; height: 60px; position: fixed;  background: #ff3855; bottom: 0px;}
	.footer-op-left { width: 40%; height: 60px; vertical-align: top; background: #fff; display: inline-block;}
	.footer-op-right { width: 100%; height: 60px; display: inline-block;}
	.footer-op-item { width: 33%; height: 60px; display: inline-block;}
	.footer-op-i-icon { width: 25px; height: 25px; margin: 8px auto 0 auto;}
	.footer-op-i-icon image { width: 100%; height: 100%;}
	.footer-op-i-text { text-align: center; height: 20px; line-height: 20px; color: #666; font-size: 13px;} 
	.footer-btn-to-cart {  display: inline-block; width: 60%; height: 60px; text-align: center; color: aliceblue; line-height: 60px; background: #fcb758;}
	.footer-btn-to-buy {  display: inline-block; width: 40%; height: 60px; text-align: center; color: aliceblue; line-height: 60px; background: #ff3855;}
</style>